/* eslint-disable @typescript-eslint/ban-types */
import React, { useState } from "react";
import Header from "@/components/Header";
import { Input, Select, Table, Button, TableColumnsType, Form } from "antd";
import "./year.scss";
// 内容
interface DataType {
  key: React.Key;
  image: string;
  name: string;
  platenumber: string;
  shop: string;
  address: string;
  time: string;
}

const columns: TableColumnsType<DataType> = [
  {
    title: "车型/照片",
    width: 220,
    dataIndex: "image",
    key: "id",
    render: (imageUrl, record) => {
      const description = record.name;

      return (
        <div style={{ display: "flex", alignItems: "center" }}>
          <img
            src={imageUrl}
            alt="车型照片"
            style={{
              width: "90px",
              height: "100px",
              marginLeft: "-20px",
              marginRight: "5px",
            }}
          />
          <p className="text">{description}</p>
        </div>
      );
    },
  },
  {
    title: "车牌",
    width: 150,
    dataIndex: "platenumber",
    key: "platenumber",
  },
  {
    title: "所在门店",
    dataIndex: "shop",
    key: "shop",
    width: 150,
  },
  {
    title: "运营状态",
    dataIndex: "address",
    key: "address",
    width: 150,
  },
  {
    title: "年检日期",
    dataIndex: "time",
    key: "time",
    width: 150,
  },
  {
    title: "操作",
    key: "operation",
    fixed: "right",
    width: 110,
    render: () => {
      return (
        <div>
          <Button type="primary" style={{ marginBottom: "5px" }}>
            修改信息
          </Button>
        </div>
      );
    },
  },
];
const data: DataType[] = [];
for (let i = 0; i < 100; i++) {
  data.push({
    key: i,
    image:
      "https://axured.cn/assets/axurefiles/1d54c281070d1b878d68aad4b49f3e5d/images/%E8%BD%A6%E8%BE%86%E7%AE%A1%E7%90%86/u7071.png",
    name: `迈凯伦540C/自动挡/硬顶跑车/3.8T/2座/2019款/Coupe`,
    platenumber: "晋A·88888",
    shop: "门店1",
    address: "租赁中",
    time: "2021-01-01" + "还有" + "30" + "天",
  });
}
type SizeType = Parameters<typeof Form>[0]["size"];
export default function MessageDispatch() {
  const [componentSize, setComponentSize] = useState<SizeType | "default">(
    "default"
  );
  const onFormLayoutChange = ({ size }: { size: SizeType }) => {
    setComponentSize(size);
  };
  return (
    <div className="storeBigBox">
      <Header title="待年检车辆" />
      <Form
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 16 }}
        layout="inline"
        initialValues={{ size: componentSize }}
        onValuesChange={onFormLayoutChange}
        size={componentSize as SizeType}
        style={{ marginTop: "5px" }}
      >
        <Form.Item label="搜索车型" style={{ width: "300px" }}>
          <Input placeholder="请输入内容" />
        </Form.Item>
        <Form.Item label="车牌号" style={{ width: "300px" }}>
          <Input placeholder="请输入内容" />
        </Form.Item>
        <Form.Item label="所属门店" style={{ width: "300px" }}>
          <Select placeholder="请选择门店">
            <Select.Option value="demo">Demo</Select.Option>
          </Select>
        </Form.Item>
      </Form>

      <div className="storeContent">
        <Table columns={columns} dataSource={data} scroll={{ y: 350 }} />
      </div>
    </div>
  );
}
